<template>
  <!--积分折算模式-->
  <page-list :pageOption="pageOption" />
</template>

<script setup>
  import PageList from '../../../components/pageList/index.vue';

  const pageOption = {
    dataUrl: '/emp/team/conversion/mode',
    method: 'get',
    //查询条件表单
    searchForm: [
      {
        field: 'modeName',
        label: '模式名称',
        component: 'Input',
        colProps: { span: 8 },
      },
      {
        field: 'modeCode',
        label: '模式编码',
        component: 'Input',
        colProps: { span: 8 },
      },
    ],
    //数据列表表头
    columns: [
      {
        title: 'id',
        dataIndex: 'id',
        width: 80,
        ifShow: false,
      },
      {
        title: '模式名称',
        dataIndex: 'modeName',
        width: 200,
        align: 'center',
      },
      {
        title: '模式编码',
        dataIndex: 'modeCode',
        width: 160,
        align: 'center',
      },
      {
        title: '模式接口',
        dataIndex: 'modeInterface',
        width: 180,
        align: 'center',
        ifShow: false,
      },
      {
        title: '排序',
        dataIndex: 'displayOrder',
        align: 'center',
        width: 100,
      },
      {
        title: '备注',
        dataIndex: 'descr',
        align: 'center',
        width: 150,
      },
    ],
    //新增编辑弹窗表单
    modalForm: [
      {
        field: 'id',
        label: 'id',
        component: 'Input',
        show: false,
      },
      {
        field: 'modeName',
        label: '模式名称',
        component: 'Input',
        required: true,
      },
      {
        field: 'modeCode',
        label: '模式编码',
        component: 'Input',
        required: true,
        dynamicDisabled: ({ values }) => {
          return !!values.id;
        },
      },
      {
        field: 'modeInterface',
        label: '模式接口',
        component: 'Input',
      },
      {
        field: 'displayOrder',
        label: '排序',
        component: 'InputNumber',
      },
      {
        field: 'descr',
        label: '备注',
        component: 'InputTextArea',
        componentProps: {
          rows: 5,
        },
        dynamicRules: () => {
          return [
            {
              validator: (_, value) => {
                if (null != value && value.length && value.length > 500) {
                  return Promise.reject('备注字数不能超过500');
                }
                return Promise.resolve();
              },
            },
          ];
        },
      },
    ],
  };
</script>

<style scoped></style>
